import React from 'react';
import { Button, Result } from 'antd';
const Result1:any = Result
// css 私有化
// styled-components 插件 
// react-jss 插件 -> Hook
import styled from 'styled-components';
const NotFountStyle = styled.section`
   color:'red';
   .title {
     width: '100px';
     background-color: #fff;
   }
`;
const NotFountStyle1 = styled.section`
   color:'red';
   .nav {
     width: '100px';
     background-color: #fff;
   }
   .title {
      font-size: '18px';
      color:'green'
   }
`;

// react-jss
import { createUseStyles } from 'react-jss'
import { NavLink } from 'react-router-dom';
const useStyles = createUseStyles({
  home: {
    color: '#333',
    // border: '1px solid pink'
  },
  title: {
    fontSize: '20px',
    color: 'green'
  }
  ,
  desc: {
    color: 'blue'
  }
})
const NotFount: React.FC = () => {
  const { home, title, desc } = useStyles()
  // console.log('useStyles', useStyles, desc)

  return (<div className={home}>
    {/* <div className={title}>home-标题</div>
     <div className={desc}>描述</div> */}
    <Result1 status="404"
      title="404"
      subTitle="Sorry, the page you visited does not exist."
      extra={<Button type="primary">
      <NavLink to='/index'>返回首页</NavLink>
      </Button>}
    />
  </div>)
}


// <>
// <NotFountStyle>
//    <h2 className='title'>标题</h2>
//   <Result status="404"
//     title="404"
//     subTitle="Sorry, the page you visited does not exist."
//     extra={<Button type="primary">返回首页</Button>}
//   />
//   </NotFountStyle>
//   <NotFountStyle1>
//   <h2 className='title'>标题</h2>
//      <div className="nav"></div>
//   </NotFountStyle1>
//   </>

// );

export default NotFount;
